<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/black/easyui.css?t=34355">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/farm/farm.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/seed/grid.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/user/userChoice.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>ext/user/seedBag.css">
    <script type="text/javascript" src="<%=basePath%>ext/farm/utils.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/plugins/jquery.edatagrid.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/easyui/locale/easyui-lang-zh_CN.js"></script>   
</head>

<style type="text/css">
	body, html{
		width: 100%; 
		height: 100%; 
		background-image: url(<%=basePath%>/images/backgroundImg.png);
	}
</style>
<body style="width: 100%; height: 100%;">
<audio id="shop" src="<%=basePath%>/sounds/shop.mp3"></audio> 
<div id="seedBag" class="easyui-window" title="种子仓库" minimizable="false" collapsible="false" 
	data-options="iconCls:'icon-seedBag', closed: false" maximizable="false" closable="false"
	style="width: 880px; top: 30px">
	<div id="controlBox" style="width: 100%;">
		<table id="grid" style="width: 100%;"
			singleSelect="true" fitColumns="true" remoteSort="false" 
			url="<%=basePath%>/seed/getList" pagination="true" sortOrder="desc" >
			<thead>
				<tr>
					<th field="seedName" width="20" sortable="true" align="center" halign="center">种子名称</th>
					<th field="seedGrade" width="20" sortable="true" align="center" halign="center">种子等级</th>
					<th field="seedType" width="20" sortable="true" align="center" halign="center">种子类型</th>
					<th field="landDemand" width="20" sortable="true" align="center" halign="center">土地需求</th>
				</tr>
			</thead>
		</table>
	</div>
</div>

<script type="text/javascript">
	
	var params = {
        id: '',
        mode: 'insert'
    };
	
	// 获取作物成长类型为5的字段集合
	var cropsStage5;
	$(function(){
    	var url = '<%=basePath%>/cropsGrow/getCropsStage5';
    	getRemoteData(url, setCropsStage5);
    	
    	// 获取用户的植物数量的信息信息
    	var url = "<%=basePath%>/seedBag/getList";
    	getRemoteData(url, showSeedBag);

    })
	function setCropsStage5(data){
		cropsStage5 = data;
	}
	function showSeedBag(){
		parent.document.getElementById("tools").src = "tools.jsp";
	}
	/* function showUserSeedList(result){
		parent.document.getElementById("tools").src = "tools.jsp";
		if(result.code == 0){
			$.messager.show({
	            title: "消息",
	            msg: result.msg
	        });
		}
	} */
    
    var high = window.innerHeight - 80;
    var grid;
	var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
		renderRow: function(target, fields, frozen, rowIndex, rowData){
			/* console.log("row ============= ");
			console.log(rowIndex);
			console.log(rowData); */
			console.log(rowData);
			var seedType;
			var landDemand;
			if(rowData.seedType == 0){
				seedType = '普通';
			}else if(rowData.seedType == 1){
				seedType = '高级';
			}else{
				seedType = '梦幻';
			}
			
			if(rowData.landDemand == 0){
				landDemand = '黄土地';
			}else if(rowData.landDemand == 1){
				landDemand = '黑土地';
			}else if(rowData.landDemand == 2){
				landDemand = '红土地';
			}else{
				landDemand = '金土地';
			}
			
			var titleStr = '名称：' + rowData.seedName + 
						   '&#10;级别：' + rowData.seedGrade +
						   '&#10;价格：' + rowData.seedPurchasePrice + '金币' +
						   '&#10;类别：' + seedType +
						   '&#10;土地：' + landDemand +
						   '&#10;可收获季：' + rowData.xSeasonCrops + '季' + 
						   '&#10;成熟时间：' + rowData.seasonTime + '秒' +
						   '&#10;单季收获：' + rowData.seasonHarvest + '个果实' +
						   '&#10;经验收获：' + rowData.experience +
						   '&#10;单个果实可获金币：' + rowData.fruitUnitPrice + '个' +
						   '&#10;积分收获：' + rowData.seasonGetPoint;
			console.log("titleStr ============================ ");
			console.log(titleStr);
			
			var cc = [];
			cc.push('<div style="width: 210px; height: 420px; display: inline-block;">')
			var seedId = rowData.seedId;
			cc.push('<div title=' + titleStr +  ' class="borderImg">');
			cc.push('</div>');
			var info = rowData.info;
			cc.push('<p class="label"><span>小贴士：</span> ' + info + '</p>');
			cc.push('<div class="tools-imagePositioner-display">');
			
			/* console.log(rowData); */
			// 根据seedId获取种子成长阶段为5的字段信息
			let len = cropsStage5.length;
			var seedId = rowData.seedId;
			var cropStage5Info;
			for(let i = 0; i < len; i++){
				if(cropsStage5[i].seedId == seedId){
					cropStage5Info = cropsStage5[i];
					break;
				}
			}
			var imgWidth = cropStage5Info.imgWidth;
			var imgHeight = cropStage5Info.imgHeight;
			var offsetX = cropStage5Info.offsetX;
			var offsetY = cropStage5Info.offsetY;
			var seedId = rowData.seedId;
			var styleStr = 'style="position:absolute; width: ' + imgWidth + 'px; height:' + imgHeight + 'px; top: ' + offsetY + 'px; left: ' + offsetX + 'px;"';
			cc.push('<img src="<%=basePath%>/images/crops/' + seedId + '/5.png' + '"' + styleStr + '>');
			cc.push('<div class="buyDiv">');
			
			cc.push('</div>');
			cc.push('</div>');
			cc.push('<input class="buyButton" type="button" onclick="buySeed(' + seedId + ')" value="我要购买"/>');
			cc.push('</div>');
			
			return cc.join('');
		}
	});
	
	var grid;
	$(document).ready(function () {
		
		grid = $('#grid').edatagrid({
			height: high,
			view: cardview,
			pageSize: 4,
            pageList: [4, 8],
		});
	});
	
	function buySeed(seedId){
		$.messager.confirm('种子购买', '确认购买种子吗？', function(r){
			if(r){
				var seedBag = {};
				seedBag.seedId = seedId;
				var url = "<%=basePath%>/seedBag/buySeed";
				shop.play();
				request(seedBag, 'post', url, showBuyResult);
			}else{
				$.messager.progress('close');
			}
			
		})
	}
    
	function showBuyResult(result){
		// 重新加载menu和tools页面
		parent.document.getElementById("tools").src="bottom.jsp";
		parent.document.getElementById("menu").src="menu.jsp";
		
		$.messager.show({
            title: "消息",
            msg: result.msg
        });
	}
	
	window.addEventListener("resize", function(){
    	var h = window.innerHeight - 80;
    	$('#grid').edatagrid({
    		height: h,
    	})
    });
</script>
</body>
</html>